<template>
  <div class="header-info">
    <div class="operation">
      <span>
        <el-icon><Message /></el-icon>
      </span>
      <span>
        <el-icon><ChatDotRound /></el-icon>
      </span>
      <span>
        <el-icon><Search /></el-icon>
      </span>
    </div>
    <!-- 个人信息 -->
    <div class="info">
      <el-dropdown>
        <span class="user-info">
          <el-avatar :size="50" src="" />
          <span class="name">eeee</span>
        </span>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item @click="handldExitClick">
              <el-icon><CircleClose /></el-icon>
              <span>推出系统</span>
            </el-dropdown-item>
            <el-dropdown-item divided>
              <el-icon><CircleClose /></el-icon>
              <span>个人信息</span>
            </el-dropdown-item>
            <el-dropdown-item>
              <el-icon><CircleClose /></el-icon>
              <span>修改密码</span>
            </el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
  </div>
</template>

<script setup lang="ts">
import { localCache } from '../../../untils/caceh'
import { LOGIN_TOKEN } from '../../../global/constants'
import { useRouter } from 'vue-router'

const router = useRouter()
function handldExitClick() {
  localCache.deleteCache(LOGIN_TOKEN)
  router.push('/login')
}
</script>

<style scoped lang="less">
.header-info {
  display: flex;
  align-items: center;
}
.operation {
  display: inline-flex;
  margin-left: 20px;
  span {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 35px;
    &:hover {
      background-color: #f2f2f2;
    }
    i {
      font-size: 20px;
    }
    .dot {
      position: absolute;
      top: 3px;
      right: 3px;
      z-index: 10;
      width: 6px;
      height: 6px;
      background-color: red;
      border-radius: 100%;
    }
  }
}
.info {
  .user-info {
    display: flex;
    align-items: center;
    cursor: pointer;
    .name {
      margin-left: 5px;
    }
  }
  // global 保证全局能够拿到，因为被弹出来的东西在app外面
  :global(.el-dropdown-menu_item) {
    line-height: 36px !important;
    padding: 6px 22px;
  }
}
</style>
